<template>
    <div class="changeBox2">
        <div class="closeBox">
                <div @click="$emit('close')"></div>
        </div>
        <!-- 查询 -->
        <div class="UserBox1">
            <form>
                <div class="timeInput" style="width:710px;">
                    下注时间：
                        <input @click="openTime=!openTime;openToTime=false" v-model="StartDate" type="text">
                    至：
                        <input @click="openToTime=!openToTime;openTime=false"  v-model="EndDate" type="text">
                </div>
                <!-- 开始日期控件 -->
                <div id='moneySchedule' style="left:89px;" v-show="openTime"  class="boxshaw"></div>
                <!-- 结束日期控件 -->
                <div id='moenySchedule' style="left:225px;" v-show="openToTime"  class="boxshaw"></div>
                <!-- 提交 -->
                <div class="postInput">
                    <input type="button" value="" @click="getNewLog()">
                </div>
            </form>
        </div>
        <!-- 列表数据 -->
        <div class="UserBox2" style="height:456px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr style="height:38px;font-size:13px;background:#282828">
                    <td>交易序号</td>
                    <td>日期时间</td>
                    <td>交易类型</td>
                    <td>交易金额</td>
                    <td>交易前账户余额</td>
                    <td>交易后账户余额</td>
                    <td>备注</td>
                </tr>
                <tr v-for="(conters,idx) in table" :key=idx>
                        <td>{{conters.AutoId}}</td>
                        <td>{{conters.AddDate}}</td>
                        <td>{{conters.OperateType}}</td>
                        <td :class="{'NumPush':conters.Money>0,'NumPush2':conters.Money<0}">{{conters.Money}}</td>
                        <td>{{conters.BeforeMoney}}</td>
                        <td>{{conters.AfterMoney}}</td>
                        <td style="max-width:290px">{{conters.Meto}}</td>
                </tr>
            </table>
        </div>
        <!-- 翻页 -->
        <div class="UserBox4">
            <div class="page">
                <div class="pd pageGo" style="float: right" v-show="Count>0" @click="getNewLog(pageThis+1)"><span></span>下一页</div>

                <div style="float: right">
                    <div  class="pageGo" v-for="page in Count" v-show="page>pageThis-3&&page<pageThis+3" :key="page" :class="{'pageThis':pageThis==page}" @click="getNewLog(page)">{{page}}</div>
                </div>
                
                <div class="pn pageGo" style="float: right" v-show="Count>0" @click="getNewLog(pageThis-1)"><span></span>上一页</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"getMoneyLog",
    data(){
		return {
			starTimeJS:null,
			openTime:false,
			StartDate:"",
			toTimeJS:null,
			openToTime:false,
			EndDate:"",
		}
	},
	computed:{
		table(){
			return this.$store.getters["log/moneyLog"];
		},
		Count(){
			var a=this.$store.getters['log/moneyLogAll'];
			a=Math.ceil(Math.ceil(a)/10);
			return a;
		},
		pageThis(){
			return this.$store.getters['log/moneyLogThis'];
		},
	},
	methods:{
		getNewLog(x){
			if(this.StartDate==""&&!x){
				this.$store.commit("changeTips",{data:"请选择开始日期"});
				return false;
			}
			if(this.EndDate==""&&!x){
				this.$store.commit("changeTips",{data:"请选择结束日期"});
				return false;
			}
			let StartDate=this.StartDate;
			let EndDate=this.EndDate;
			let PageSize=10;
			let CurrentPage= x?x:1;
			let data={StartDate,EndDate,PageSize,CurrentPage}
			this.$store.dispatch("log/getMoneyLog",data)
		}
	},
	mounted(){
		let a=new Date();
		this.StartDate=""+a.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate();
		this.EndDate=""+a.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate();
		this.starTimeJS= new Schedule({
			el: '#moneySchedule',
			clickCb:function (y,m,d) {
					this.StartDate=y+"-"+m+"-"+d;
					this.openTime=false;
				}.bind(this)
			})
		this.starTimeJS= new Schedule({
			el: '#moenySchedule',
			clickCb:function (y,m,d) {
					this.EndDate=y+"-"+m+"-"+d;
					this.openToTime=false;
				}.bind(this)
			})
	}
}
</script>
